@import '../basic/globalVar.scss';
@import '../mixins/index.scss';
@mixin tagSize($size) {
  $font-size: $--tag-font-size-default;
  $padding: $--tag-padding-horizontal-default;
  $height: $--tag-height-default;
  @if ($size == 'mini') {
    $font-size: $--tag-font-size-mini;
    $height: $--tag-height-mini;
    $padding: $--tag-padding-horizontal-mini;
  } @else if ($size == 'small') {
    $font-size: $--tag-font-size-small;
    $height: $--tag-height-small;
    $padding: $--tag-padding-horizontal-small;
  } @else if ($size == 'large') {
    $font-size: $--tag-font-size-large;
    $height: $--tag-height-large;
    $padding: $--tag-padding-horizontal-large;
  }
  font-size: $font-size;
  padding: 0 $padding;
  height: $height;
  line-height: #{$height - 2px};
  @include el(icon, false) {
    font-size: #{$font-size + 2px};
    margin-left: $padding;
  }
}

@mixin tag-color($font-color, $border-color, $type: '') {
  color: $font-color;
  border-color: $border-color;
  background-color: $border-color;
  @include el(icon, false) {
    color: $font-color;
  }
  @if ($type == 'o') {
    background-color: mix(
      $border-color,
      $--color-white,
      $--button-active-percent
    );
  } @else if ($type == 'ghost') {
    background-color: transparent;
  } @else if ($type == 'ghost-o') {
    background-color: transparent;
    @include el(icon, false) {
      color: $font-color;
    }
  }
}

@include classNameConnect(tag) {
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0 5px;
  border-color: $--tag-border-color-default;
  border-radius: $--border-radius-default;
  color: $--tag-font-color-default;
  background-color: $--tag-background-color-default;
  transition: all $--animation-time;
  &:hover {
    opacity: $--tag-hover-opacity;
  }
  @include el(icon, false) {
    opacity: $--tag-hover-opacity;
    line-height: normal;
    vertical-align: middle;
    &:hover {
      opacity: 1;
    }
  }

  @include b(mini) {
    @include tagSize(mini);
  }
  @include b(small) {
    @include tagSize(small);
  }
  //尺寸default
  @include b(default) {
    @include tagSize(default);
  }
  @include b(large) {
    @include tagSize(large);
  }
  //颜色default
  @include b(color-default) {
    @include el(icon, false) {
      //color: $--tag-font-color-default;
    }
  }
  @include b(color-success) {
    @include tag-color($--color-white, $--color-success);
  }
  @include b(color-danger) {
    @include tag-color($--color-white, $--color-danger);
  }
  @include b(color-primary) {
    @include tag-color($--color-white, $--color-primary);
  }
  @include b(color-warning) {
    @include tag-color($--color-white, $--color-warning);
  }
  @include b(color-info) {
    @include tag-color($--color-white, $--color-info);
  }
  @include b(color-default-o) {
    @include tag-color(
      $--tag-font-color-default,
      $--tag-font-color-default,
      'o'
    );
  }

  @include b(color-success-o) {
    @include tag-color($--color-success, $--color-success, 'o');
  }
  @include b(color-danger-o) {
    @include tag-color($--color-danger, $--color-danger, 'o');
  }

  @include b(color-primary-o) {
    @include tag-color($--color-primary, $--color-primary, 'o');
  }

  @include b(color-warning-o) {
    @include tag-color($--color-warning, $--color-warning, 'o');
  }

  @include b(color-info-o) {
    @include tag-color($--color-info, $--color-info, 'o');
  }

  @include b(ghost, false, true) {
    @include b(color-default, false, true) {
      @include tag-color(
        $--tag-font-color-default,
        $--tag-font-color-default,
        'ghost'
      );
    }
  }

  @include b(ghost, false, true) {
    @include b(color-primary, false, true) {
      @include tag-color($--color-primary, $--color-primary, 'ghost');
    }
  }

  @include b(ghost, false, true) {
    @include b(color-danger, false, true) {
      @include tag-color($--color-danger, $--color-danger, 'ghost');
    }
  }

  @include b(ghost, false, true) {
    @include b(color-success, false, true) {
      @include tag-color($--color-success, $--color-success, 'ghost');
    }
  }

  @include b(ghost, false, true) {
    @include b(color-warning, false, true) {
      @include tag-color($--color-warning, $--color-warning, 'ghost');
    }
  }

  @include b(ghost, false, true) {
    @include b(color-info, false, true) {
      @include tag-color($--color-info, $--color-info, 'ghost');
    }
  }

  @include b(ghost, false, true) {
    @include b(color-default-o, false, true) {
      @include tag-color(
        $--tag-font-color-default,
        $--tag-font-color-default,
        'ghost-o'
      );
    }
  }

  @include b(ghost, false, true) {
    @include b(color-primary-o, false, true) {
      @include tag-color($--color-primary, $--color-primary, 'ghost-o');
    }
  }

  @include b(ghost, false, true) {
    @include b(color-danger-o, false, true) {
      @include tag-color($--color-danger, $--color-danger, 'ghost-o');
    }
  }

  @include b(ghost, false, true) {
    @include b(color-success-o, false, true) {
      @include tag-color($--color-success, $--color-success, 'ghost-o');
    }
  }

  @include b(ghost, false, true) {
    @include b(color-warning-o, false, true) {
      @include tag-color($--color-warning, $--color-warning, 'ghost-o');
    }
  }

  @include b(ghost, false, true) {
    @include b(color-info-o, false, true) {
      @include tag-color($--color-info, $--color-info, 'ghost-o');
    }
  }

  &:not(.is-checked) {
    background-color: transparent;
    border-color: transparent;
    color: $--tag-font-color-default;
    @include el(icon, false) {
      color: $--tag-font-color-default;
    }
  }
}
